<template>
  <div
    class="card"
    :style="{ '--color': props.cardObj.textColor }"
  >
    <img :src="props.cardObj.image" />
    <div class="text-box">
      <h2>{{ props.cardObj.title }}</h2>
      <p>{{ props.cardObj.desc }}</p>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  cardObj: {
    type: Object,
    required: false,
    default: () => ({
      textColor: '#d6e3eb',
      image: 'none',
      title: '',
      desc: ''
    })
  }
})
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.card {
  width: 30vmin;
  aspect-ratio: 3/4;
  border-radius: 1vmin;
  overflow: hidden;

  display: flex;
  gap: 5vmin;
  position: relative;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    transition: transform 0.8s; /* 只对transform使用过渡 */
    transform-origin: center; /* 缩放中点设置为中心 */
    // 图片无法被选中
    user-select: none;
  }

  /* 鼠标悬停时 */
  &:hover {
    // 图片放大
    img {
      transform: scale(1.1); /* 放大1.1倍 */
    }
    // 文字淡入
    .text-box {
      h2,
      p {
        color: inherit;
        opacity: 1;
        transform: translateY(0);
      }
    }

    &:before,
    &:after {
      transform: scaleX(1);
    }
  }

  /* 开始标签前插入和结束标签后插入内容的共有样式 */
  &:before,
  &:after {
    content: '';
    width: 100%;
    height: 50%;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transform: scaleX(0);
    transition: all 0.5s;
    transform-origin: left;
  }

  /* 结束标签后插入内容 */
  &:after {
    top: 50%;
    transition-delay: 0.15s;
  }

  /* 文字盒子 */
  .text-box {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.5vmin;
    letter-spacing: 0.1vmin;
    inset: 2vmin;
    position: absolute;
    top: auto;
    z-index: 2;

    /* 标题和内容共有的样式 */
    h2,
    p {
      color: var(--color);
      opacity: 0;
      transform: translateY(10vmin);
      transition:
        opacity 0.8s,
        transform 0.8s; /* 只对transform和opacity使用过渡 */
    }
    /* 标题 */
    h2 {
      font-size: 6vmin;
      font-weight: bold;
      margin-bottom: 1vmin;
    }

    /* 内容 */
    p {
      transition-delay: 0.15s;
    }
  }
}
</style>
